<template>
    <div class="bottom_content">
        <div class="title">活跃媒体</div>
        <ShowEcharts :options="options" :height="height"></ShowEcharts>
    </div>
</template>

<script setup lang="ts">
import { Ref, ref, reactive } from 'vue';
import ShowEcharts from '@/components/ShowEcharts.vue';
const height: Ref<string> = ref('3.38rem');
let options = reactive({
    // 提示内容
    tooltip: {},
    // 调色盘
    color: ['#f1e5d2', '#1f48a6', '#3c6ccf', '#6497ff', '#3dc1a3'],
    series: [
        {
            name: 'Access From',
            type: 'pie',
            selectedMode: 'single',
            radius: ['20%', '50%'],
            label: {
                position: 'inside',
                fontSize: 8
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 1548, name: '微信' },
                { value: 775, name: '百度贴吧' },
                { value: 679, name: '腾讯网' },
                { value: 679, name: '生活圈' },
                { value: 679, name: '百度百家', selected: true }
            ]
        },
        {
            name: 'Access From',
            type: 'pie',
            radius: ['55%', '70%'],
            labelLine: {
                length: 2
            },
            label: {
                fontSize: 8,
                color: '#fff'
            },
            // 图形样式itemStyle
            itemStyle: {
                color: function (params: any) {
                    // console.log(params);
                    var colors = ['#f00', '#fff', '#ff0', '#0ff', 'f44'];
                    return colors[params.dataIndex]
                }
            },
            data: [
                { value: 1048, name: '百度贴吧' },
                { value: 335, name: '腾讯网' },
                { value: 310, name: '生活圈' },
                { value: 251, name: '百度百家' },
                { value: 251, name: '微信' },
            ]
        }
    ]
})
</script>

<style lang="less" scoped>
.bottom_content {
    position: relative;

    .title {
        font-size: 0.1458rem;
        position: absolute;
        right: .5208rem;
        top: -0.3125rem;
    }
}
</style>
